<template>
    <div class="school">
        <div v-if="showType == '1'">
            <img
                class="xzcsapp-img"
                src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/appDownload/app_m_download.jpg"
                alt="小竹财税app"
            />
        </div>
        <div v-if="showType == '2'">
            <img
                class="xzcsapp-img"
                style="width: 1200px;"
                src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/appDownload/zhaoshang_details.png"
                alt="招商"
            />
            <img class="xzcsapp-img-code" src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/appDownload/zhaoshang_details_code.png" alt="招商二维码">
        </div>
        <div v-if="!mShow" id="index-carousel" class="index">
            <el-carousel
                ref="myCarousel"
                :initial-index="carouselIndex"
                height="calc(100vh - 80px)"
                direction="vertical"
                :autoplay="false"
                trigger="click"
                @change="change"
            >
                <el-carousel-item>
                    <div class="carousel">
                        <img
                            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/appDownload/appDownload_01.jpg?v=1.1"
                            class="bj"
                            alt="小竹财税app"
                        />
                    </div>
                </el-carousel-item>
                <el-carousel-item>
                    <div class="carousel">
                        <div class="div-bj">
                            <img
                                src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/appDownload/appDownload_02.jpg"
                                alt="小竹财税app"
                            />
                        </div>
                        <transition name="el-zoom-in-center">
                            <img
                                v-show="carouselIndex == 1"
                                src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/appDownload/download_01.png?v=1.1"
                                class="carousel-2-img"
                                alt="小竹财税app"
                            />
                        </transition>
                    </div>
                </el-carousel-item>
                <el-carousel-item>
                    <div class="carousel">
                        <div class="div-bj2">
                            <img
                                src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/appDownload/appDownload_03.jpg"
                                alt="小竹财税app"
                            />
                        </div>
                        <div class="imgs">
                            <transition name="left-go">
                                <img
                                    class="download_08"
                                    v-show="carouselIndex == 2"
                                    src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/appDownload/download_08.png"
                                    alt=""
                                />
                            </transition>
                            <transition name="right-go">
                                <img
                                    class="download_04"
                                    v-show="carouselIndex == 2"
                                    src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/appDownload/download_04.png"
                                    alt="小竹财税app"
                                />
                            </transition>
                        </div>
                    </div>
                </el-carousel-item>
                <el-carousel-item>
                    <div class="carousel">
                        <div class="div-bj2">
                            <img
                                src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/appDownload/appDownload_04.jpg"
                                alt="小竹财税app"
                            />
                        </div>
                        <div class="imgs">
                            <transition name="left-go">
                                <img
                                    v-show="carouselIndex == 3"
                                    class="download_09"
                                    src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/appDownload/download_09.png?v-1.1"
                                    alt="小竹财税app"
                                />
                            </transition>
                            <transition name="right-go">
                                <img
                                    v-show="carouselIndex == 3"
                                    class="download_07"
                                    src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/appDownload/download_07.png"
                                    alt="小竹财税app"
                                />
                            </transition>
                        </div>
                    </div>
                </el-carousel-item>
                <el-carousel-item>
                    <div class="carousel">
                        <div class="div-bj2">
                            <img
                                src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/appDownload/appDownload_05.jpg"
                                alt="小竹财税app"
                            />
                        </div>
                        <div class="imgs">
                            <transition name="left-go">
                                <img
                                    v-show="carouselIndex == 4"
                                    class="download_05"
                                    src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/appDownload/download_05.png"
                                    alt="小竹财税app"
                                />
                            </transition>
                            <transition name="right-go">
                                <img
                                    v-show="carouselIndex == 4"
                                    class="download_03"
                                    src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/appDownload/download_03.png"
                                    alt="小竹财税app"
                                />
                            </transition>
                        </div>
                    </div>
                </el-carousel-item>
                <el-carousel-item>
                    <div class="carousel">
                        <div class="div-bj2">
                            <img
                                src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/appDownload/appDownload_06.jpg"
                                alt="小竹财税app"
                            />
                        </div>
                        <div class="imgs">
                            <transition name="left-go">
                                <img
                                    v-show="carouselIndex == 5"
                                    src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/appDownload/download_02.png"
                                    alt="小竹财税app"
                                />
                            </transition>
                            <transition name="right-go">
                                <img
                                    v-show="carouselIndex == 5"
                                    class="download_06"
                                    src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/appDownload/download_06.png?v=2"
                                    alt="小竹财税app"
                                />
                            </transition>
                        </div>
                    </div>
                </el-carousel-item>
                <el-carousel-item>
                    <div class="carousel">
                        <img
                            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/appDownload/appDownload_07.jpg?v=1.1"
                            class="bj"
                            alt="小竹财税app"
                        />
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class=""></div>
    </div>
</template>

<script>
import { goTop } from "@/assets/utils/utils.js";

import { mapState, mapMutations } from "vuex";

var isChang = true;
export default {
    components: {
        // BaiduMap
    },

    layout: "home",
    head() {
        return {
            title: "小竹财税-【小竹财税平台】",
            meta: [
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "小竹财税,财税",
                },
            ],
        };
    },
    data() {
        return {
            carouselIndex: 0,

            indexMap: {
                // styleJson: indexMap2
            },

            showCarousel: false,

            finddealquiznum: 0,
            findissuenum: 0,
            findstatutenum: 0,
            countToShow: false,
            mShow: false,
            showType: ''
        };
    },
    beforeMount() {
        // 只会在浏览器执行
        // this.$options.components["BaiduMap"] = () => import("vue-baidu-map");
    },
    mounted() {
        console.log(this.mShow, this.$route);
        if (this.$route.query.m == "1") {
            this.mShow = true;
            this.showType = this.$route.query.m
        }  else if (this.$route.query.m == "2") {
            this.mShow = true;
            this.showType = this.$route.query.m
        } else {
            this.mShow = false;
        }
        console.log(this.mShow, this.$route);

        this.setmenuIndex("0");
        this.carouselIndex = 0;
        if (!this.mShow) {
            let bodyStyle = document.body.style;
            bodyStyle.overflow = "hidden";

            document
                .getElementById("app-home")
                .addEventListener("mousewheel", this.mousewheel);
        }
    },
    // 销毁前重置body样式
    beforeDestroy() {
        let bodyStyle = document.body.style;
        bodyStyle.overflow = "auto";
        try {
            document
                .getElementById("app-home")
                .removeEventListener("mousewheel", this.mousewheel);
        } catch (error) {}
    },
    computed: {
        ...mapState("common", {
            isFooterShow: (state) => state.isFooterShow,
        }),
    },
    watch: {},
    methods: {
        ...mapMutations("common", ["setmenuIndex"]),

        change(index) {
            this.carouselIndex = index;
        },

        // 滚动事件
        mousewheel(e) {
            if (!isChang) {
                return;
            }
            isChang = false;
            setTimeout(() => {
                isChang = true;
            }, 450);

            let direction = e.deltaY > 0 ? "down" : "up";

            if (this.isFooterShow) {
                let element = document.getElementById("index-carousel");
                element.scrollIntoView({
                    behavior: "smooth",
                    block: "end",
                    inline: "nearest",
                });
            }

            if (direction == "down") {
                if (this.carouselIndex == 0) {
                    goTop(40, true);
                }

                if (this.carouselIndex < 6) {
                    this.carouselIndex++;
                    this.$refs.myCarousel.setActiveItem(this.carouselIndex);
                } else if (this.carouselIndex == 6) {
                    let element = document.getElementById("pc-footer");
                    element.scrollIntoView({
                        behavior: "smooth",
                        block: "end",
                        inline: "nearest",
                    });
                }
            } else if (direction == "up") {
                if (this.carouselIndex > 0) {
                    this.carouselIndex--;
                    this.$refs.myCarousel.setActiveItem(this.carouselIndex);
                } else if (this.carouselIndex == 0) {
                    goTop(0, true);
                }
            }
        },

        handler({ BMap, map }) {
            this.center.lng = 116.404;
            this.center.lat = 39.915;
            this.zoom = this.zoom;
        },
        getClickInfo(e) {
            // 创建地理编码实例
            const myGeo = new BMap.Geocoder();
            // 根据坐标逆解析地址
            myGeo.getPoint(
                "安徽省合肥市金中环广场A座1805",
                function (point) {
                    if (point) {
                        map.centerAndZoom(point, 16);
                        map.addOverlay(
                            new BMapGL.Marker(point, {
                                title: "安徽省合肥市金中环广场A座1805",
                            })
                        );
                    } else {
                        alert("您选择的地址没有解析到结果！");
                    }
                },
                "北京市"
            );
            this.center.lng = e.point.lng;
            this.center.lat = e.point.lat;
        },
        syncCenterAndZoom(e) {
            console.log(e.target, "e.target-->>>>");
            const { lng, lat } = e.target.getCenter();
            this.zoom = e.target.getZoom();
        },

        goLink(item) {
            this.$router.push({ path: item.link });
        },
    },
};
</script>

<style lang="scss" scoped>
.index {
    width: 100vw;
}

.carousel {
    position: relative;
    width: 100%;
    height: 100%;
    .bj {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        object-fit: cover;
    }

    .div-bj {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: #fff;

        img {
            width: auto;
            height: 100%;
            margin: 0 auto;
        }
    }

    .div-bj3 {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: #fff;

        img {
            width: 100%;
            height: auto;
            margin: 0 auto;
        }
    }

    .div-bj2 {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: #fff;

        img {
            width: 100%;
            height: 100%;
            margin: 0 auto;
        }
    }

    .carousel-2-img {
        position: relative;
        top: 25vh;
        z-index: 10;
        width: 95vh;
        height: auto;
        margin: 0 auto;
        transition-delay: 0.3s;
    }

    .imgs {
        position: relative;
        top: 10;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        width: 1200px;
        margin: 0 auto;

        img {
            transition: all 0.4s cubic-bezier(0.55, 0, 0.1, 1);
            transition-delay: 0s;
            height: auto;
            position: relative;
        }
    }

    img {
        display: block;
    }
}

.left-go-enter {
    opacity: 1;
}
.left-go-enter-active {
    opacity: 0;
    transform: translateX(-30%);
}

.right-go-enter {
    opacity: 1;
}
.right-go-enter-active {
    opacity: 0;
    transform: translateX(30%);
}

.xzcsapp-img {
    width: 750px;
    margin: 30px auto;
    display: block;
}

.xzcsapp-img-code{
    position: fixed;
    right: 0;
    top: 41vh;
    width: 155px;
    height: auto;
}

.download_08 {
    top: -9%;
    left: 15%;
    width: 35%;
}
.download_04 {
    width: 35%;
    left: -15%;
}

.download_09 {
    width: 35%;
    left: 10%;
}

.download_07 {
    width: 35%;
    top: -12%;
    left: -10%;
}

.download_05 {
    top: -9%;
    left: 15%;
    width: 35%;
}
.download_03 {
    width: 35%;
    left: -15%;
}
.download_02 {
    width: 35%;
    left: 10%;
}

.download_06 {
    width: 35%;
    top: -12%;
    left: -10%;
}
</style>